<template>
	<view class="content">
		<view class="content_head">
			<view class="content_head_left" v-if="isLogin" @click="gouser">
				<image class="chl_logo" :src="detail.avatar"></image>
				<text class="chl_tel">{{detail.nickname}}</text>
			</view>
			<view class="content_head_left" v-else @click="login">
				<image class="chl_logo" src="/static/logo1.png"></image>
				<text class="chl_tel">登录/注册</text>
			</view>
			<view class="content_head_right">
				<image src="/static/icon_setting.png" @click="setting" />
			</view>
		</view>

		<view class="cardbox">
			<view class="cardbox_top">
				<view class="ct_left">
					<image class="cardbox_top_icon" src="/static/vip_icon.png" />
					<text class="cardbox_top_txt" v-if="detail.is_vip==1">到期：{{detail.vip_time}}</text>
					<text class="cardbox_top_txt" v-else>开通会员立享超值权益</text>
				</view>

				<view @click="handleJumpOpenVip" class="cwhy">{{detail.is_vip==1?'续费会员':'成为会员'}}</view>
			</view>
			<view class="cardbox_bot_after"></view>

			<view class="cardbox_bot">
				<view class="cb_item" v-for="(item,index) in cardData" :key="index" @click="order(item)">
					<image :src="item.src"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="card_two">
			<view class="cardtwo_item" @click="getCoupons">
				<view>
					<view class="cti_top">领券中心</view>
					<view class="cti_bot">优惠券购买</view>
				</view>
				<image src="/static/lqzx.png" />
			</view>
			<view class="cardtwo_item" @click="shop">
				<view v-if="detail.shop_status==3">
					<view class="cti_top">商家端</view>
					<view class="cti_bot">进入商家端</view>
				</view>
				<view v-else>
					<view class="cti_top">商家入驻</view>
					<view class="cti_bot">申请成为私厨</view>
				</view>
				<image src="/static/sjrz.png" />
			</view>
		</view>

		<view class="card_three">
			<view class="ct_row ct_row1">
				<view class="ct_row_item" @click="go('/pages/sc/selectCoupon/selectCoupon')">
					<image src="/static/icon_a.png" />
					<text>优惠券</text>
				</view>
				<view class="ct_row_item" @click="call">
					<image src="/static/icon_b.png" />
					<text>平台电话</text>
				</view>
				<view class="ct_row_item">
					<button open-type="contact"></button>
					<image src="/static/icon_c.png" />
					<text>在线客服</text>
				</view>
				<view class="ct_row_item" @click="go('/pages/user/address/address')">
					<image src="/static/icon_d.png" />
					<text>我的地址</text>
				</view>
			</view>
			<view class="ct_row">
				<view class="ct_row_item" v-for="(item,index) in cardThreeData2" :key="index"
					@click="agreement(item.id)">
					<image :src="item.src" />
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isLogin: false,
				cardData: [{
						name: '待付款',
						src: '/static/icon1.png',
						url: '/pages/voucherPage',
						state: 1
					},
					{
						name: '待接单',
						src: '/static/icon2.png',
						url: '/pages/voucherPage',
						state: 2
					},
					{
						name: '配送/自提',
						src: '/static/icon3.png',
						url: '/pages/voucherPage',
						state: 3
					},
					{
						name: '待评价',
						src: '/static/icon4.png',
						url: '/pages/voucherPage',
						state: 4
					},
					{
						name: '退款',
						src: '/static/icon5.png',
						url: '/pages/voucherPage',
						state: 5
					}
				],
				cardThreeData2: [{
						name: '关于我们',
						src: '/static/icon_e.png',
						id: '7'
					},
					{
						name: '平台协议',
						src: '/static/icon_f.png',
						id: '8'
					},
					{
						name: '用户协议',
						src: '/static/icon_g.png',
						id: '1'
					},
					{
						name: '消费协议',
						src: '/static/icon_h.png',
						id: '9'
					}
				],
				app: getApp().globalData,
				detail: {}
			}
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onShow() {
			this.app.post('/api/chef/user/info').then(res => {
				console.log(res)
				this.detail = res
			})
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					console.log(loginRes.code);
					this.app.post('/api/user/bind_wx', {
						code: loginRes.code
					}).then(res => {
						console.log(res)
					})
				}
			});

			console.log(this.$store.state.user.isLogin)
			this.isLogin = this.$store.state.user.isLogin
		},
		methods: {
			shop() {
				console.log(this.detail.shop_status)
				if (this.detail.shop_status == -1) {
					uni.navigateTo({
						url: '/pages/new/settled/ruzhushenqing'
					})
				} else if (this.detail.shop_status == 3) {
					uni.navigateTo({
						url: '/pages/new/shop/shop'
					})
				} else if (this.detail.shop_status == 2) {
					uni.navigateTo({
						url: '/pages/new/success/success'
					})
				} else if (this.detail.shop_status == 4) {
					uni.navigateTo({
						url: '/pages/new/fail/fail?reason=' + this.detail.refuse
					})
				}
			},
			handleJumpOpenVip() {
				uni.navigateTo({
					url: '/pages/sc/member/member?state=' + this.detail.is_vip
				})
			},
			getCoupons() {
				uni.navigateTo({
					url: '/pages/sc/getCoupons/getCoupons?state=' + this.detail.is_vip
				})
			},
			go(url) {
				if (this.$store.state.user.isLogin) {

					uni.navigateTo({
						url: url
					})

				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.detail.kefu_mobole
				});
			},
			login() {
				this.$wanlshop.to('/pages/user/auth/auth');
			},
			setting() {
				this.$wanlshop.to('/pages/user/setting/setting');
			},
			gouser() {
				uni.navigateTo({
					url: '/pages/user/setting/user'
				})
			},
			agreement(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/sc/agreement/agreement?id=' + id
				})
			},
			order(item) {
				uni.setStorageSync('state', item.state);
				uni.switchTab({
					url: item.url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #EEFCEB;
		overflow: auto;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
	}

	.content_head {
		display: flex;
		flex-direction: row;
		align-items: center;
		junstify-content: space-between;
		width: 100%;
		height: 100rpx;
		margin-bottom: 33rpx;

		.content_head_left {
			flex: 1;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.chl_logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.chl_tel {
				font-size: 36rpx;
				font-weight: 500;
				color: #3d3d3d;
				margin-left: 29rpx;
				font-family: HarmonyOS Sans SC;
			}
		}

		.content_head_right image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.cardbox {
		width: 100%;
		position: relative;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 27rpx;

		.cardbox_top {
			width: 100%;
			height: 147rpx;
			background: linear-gradient(270deg, #413932 45%, #585364 100%);
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 48rpx 30rpx 89rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.ct_left {
				display: flex;
				flex-diretion: row;
				align-items: center;

				.cardbox_top_icon {
					width: 128rpx;
					height: 38rpx;
					margin-right: 19rpx;
				}

				.cardbox_top_txt {
					font-family: HarmonyOS Sans SC;
					font-size: 26rpx;
					color: #F7EDD5;
				}
			}

			.cwhy {
				width: 140rpx;
				height: 54rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: #413932;
				font-size: 26rpx;
				background: linear-gradient(270deg, #FCE3CB 0%, #ECB493 100%);
				border-radius: 50rpx;
			}
		}

		.cardbox_bot_after {
			width: 100%;
			height: 144rpx;
		}

		.cardbox_bot {
			width: 100%;
			height: 192rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: absolute;
			top: 99rpx;
			left: 0;
			right: 0;
			padding: 52rpx 30rpx 35rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.cb_item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 17rpx;
				}

				text {
					font-family: HarmonyOS Sans SC;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.card_two {
		width: 100%;
		height: 157rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 27rpx;

		.cardtwo_item {
			width: 329rpx;
			height: 157rpx;
			border-radius: 20rpx;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 0 8rpx 28rpx;
			box-sizing: border-box;

			image {
				width: 142rpx;
				height: 142rpx;
			}

			.cti_top {
				font-size: 33rpx;
				font-weight: 500;
				color: #333;
			}

			.cti_bot {
				font-family: HarmonyOS Sans SC;
				font-size: 26rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}

	.card_three {
		width: 100%;
		padding: 35rpx 26rpx 44rpx 26rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;

		.ct_row1 {
			margin-bottom: 53rpx;
		}

		.ct_row {
			width: 100%;
			height: 92rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.ct_row_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 96rpx;
				position: relative;

				button {
					width: 100%;
					height: 96rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 66;
					opacity: 0;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 14rpx;
				}

				text {
					font-family: HarmonyOS Sans SC;
					font-size: 24rpx;
					font-weight: normal;
					color: #333;
				}
			}
		}
	}
</style>